<template>
  <div class="record">
    <secondTopPanel>
      <div slot='title'>我的安全币</div>
    </secondTopPanel>
    <div class="total">合计：{{rankListTotal>0?'+':''}}{{rankListTotal}}</div>
    <zPaging class="zPaging" :default-page-size="10" :fixed='false' height='100%' ref="paging" @query="queryList" v-model="rankList" :delay='200' :refresher-end-bounce-enabled="false">
      <div class="t-table">
        <div class="t-tr" v-for="(item,index) in rankList " :key="'rankList'+index">
          <div class="t-td">
            <div class="content">{{item.content}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
          <div class="t-td">{{item.points>0?'+':''}}{{ item.points }}</div>
        </div>
      </div>
    </zPaging>
  </div>
</template>

<script>
import { userPointsList, pointsRanking } from "@/api/integral.js";
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'

export default {
  name: 'record',
  components: { zPaging, secondTopPanel },
  mixins: [ZPagingMixin],
  data () {
    return {
      firstImg: [require("@/static/wczd/first.png"), require("@/static/wczd/second.png"), require("@/static/wczd/third.png")],
      rankList: [
        { content: '王师傅发现隐患', grade: '1', time: '2016-04-15' },
        { content: '张师傅发现隐患', grade: '2', time: '2016-04-15' },
        { content: '李师傅处置隐患', grade: '3', time: '2016-04-15' },
        { content: '工师傅整改隐患', grade: '3', time: '2016-04-15' },
        { content: '申师傅发现隐患', grade: '2', time: '2016-04-15' },
        { content: '严师傅审核隐患', grade: '1', time: '2016-04-15' },
        { content: '立师傅发现隐患立师傅发现隐患立师傅发现隐患立师傅发现隐患立师傅发现隐患立师傅发现隐患', grade: '1', time: '2016-04-15' },
        { content: '青师傅整改隐患', grade: '3', time: '2016-04-15' },
        { content: '皮师傅整改隐患', grade: '2', time: '2016-04-15' },
        { content: '里师傅发现隐患', grade: '1', time: '2016-04-15' },
      ]
    }
  },
  computed: {
    rankListTotal () {
      let total = 0
      this.rankList.forEach(element => {
        total += Number(element.points)
      })
      return total
    }
  },
  mounted () { },
  watch: {},
  methods: {
    // z-paging 查询方法
    queryList (pageNo, pageSize) {
      uni.showLoading({
        title: '加载中'
      });
      userPointsList({}, { pageNum: pageNo, pageSize: pageSize }).then(res => {
        this.$refs.paging.complete(res.rows);
        uni.hideLoading();
      })
    },
  },
}
</script>

<style scoped lang="scss">
.record {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.total {
  background-color: #f5f5f5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 110upx 60upx 10upx 60upx;
}
.zPaging {
  flex: 1;
  height: 0;
  .t-table {
    width: 100%;
    background-color: #fff;
  }
  .t-tr {
    display: flex;
    padding: 0 40upx;
    justify-content: space-evenly;
    border-bottom: 1px solid rgb(218, 218, 218);
    .t-td {
      padding: 10upx 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .content {
        font-size: 30upx;
      }
      .time {
        font-size: 24upx;
        color: rgb(102, 102, 102);
      }
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        width: 60upx;
        text-align: center;
      }
    }
  }
}
</style>
